<template>
	<y-popup ref="scenePopup" mode='bottom' round="12px">
		<view class="p-16 vh-80">
			<text>选择形象</text>
			<z-paging ref="scenePaging" v-model="list" use-page-scroll @query="getList">
				<view class="grid-columns-2 gap-10 mt-10">
					<view class="h-260 round-8 overflow-hidden   " v-for="(item,index) in list"
						@click="selected(item)">
						<image :src="item.cover" class="w-p-100 h-220"></image>
						<view class="h-40 flex flex-center text-center  shadow">
							{{item.title}}
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</y-popup>
</template>

<script setup>
	import { ref } from 'vue';
	import { getSceneList } from '@/api/scene.js'
	const list = ref([])
	const scenePaging = ref(null)
	const scenePopup = ref(null)
	const emit = defineEmits(['selected'])
	const open = () => {
		scenePopup.value.open();
	}
	const getList = (page, limit) => {
		getSceneList({ page: page, limit: limit, type: 2 }).then(res => {
			scenePaging.value.complete(res.data)
		})
	}
	const selected = (e) => {
		scenePopup.value.close()
		emit('selected', e)
	}
	defineExpose({ open })
</script>

<style>
</style>